<template>
    <el-container class="cron-container" direction="vertical">
        <el-container class="row">
            <label role="radio" class="el-radio label-item"><span class="el-radio__label label-text">执行时间</span></label>
            <el-radio v-for="item in cronTypes" v-model="form.cronType" :label="item.id" v-bind:key="item.id">{{
                item.name }}</el-radio>
        </el-container>
        <el-container class="row" v-if="checkShow(CronType.Timing)">
            <label role="radio" class="el-radio label-item"><span class="el-radio__label label-text">定时执行</span></label>
            <el-popover v-model="cronPopover">
                <VueCronLinux @close="cronPopover = false" @change="onChangeCron"></VueCronLinux>
                <el-input class="cron-input" slot="reference" @click="cronPopover = true" v-model="form.triggerCron"
                    placeholder="请输入定时策略"></el-input>
            </el-popover>
        </el-container>
        <el-container class="row" v-if="checkShow(CronType.Specific)">
            <label role="radio" class="el-radio label-item"><span class="el-radio__label label-text">执行时间</span></label>
            <el-date-picker :picker-options="pickerOptions" class="cron-input" v-model="form.triggerTime"
                type="datetime" placeholder="选择日期时间">
            </el-date-picker>
        </el-container>
        <el-container class="row">
            <label role="radio" class="el-radio label-item"><span class="el-radio__label label-text">备注信息</span></label>
            <el-input class="cron-input" v-model="form.message" placeholder="请输入备注信息"></el-input>
        </el-container>
    </el-container>
</template>

<style lang="scss">
.cron-container {
    margin-top: 20px;

    .row {
        margin-bottom: 15px;
    }

    .cron-input {
        input {
            width: 350px;
        }
    }

    .label-item {
        display: flex !important;
        align-items: center;
        margin-right: 15px !important;
    }

    .label-text {
        font-size: medium;
        font-weight: normal;
        padding-left: 0px !important;
    }
}
</style>

<script>
import { CronType } from "../../../entities/Constant"
import VueCronLinux from "../VueCronLinux/VueCronLinux"
export default {
    name: "JSCron",
    props: {
        jobCron: {
            type: String,
            default: "{}"
        }
    },
    components: {
        VueCronLinux
    },
    data() {
        return {
            CronType: CronType,
            cronTypes: CronType.Options(),
            cronPopover: false,
            form: this.getJobCronObj(),
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
        }
    },
    mounted() {
        console.log(this.cronTypes)
    },
    methods: {
        getJobCronObj() {
            console.log("jobCron", this.jobCron)
            if (this.jobCron.length > 2) {
                return JSON.parse(this.jobCron)
            } else {
                return {
                    message: "",
                    triggerCron: '',
                    triggerTime: '',
                    cronType: CronType.Instant,
                }
            }
        },
        onChangeCron(v) {
            if (this.form.cronType == CronType.Specific) {
                this.form.triggerTime = v;
            } else {
                this.form.triggerCron = v;
            }
        },
        checkShow(cronType) {
            return cronType == this.form.cronType
        }
    }
}
</script>